<template>
  <div class="right-content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <div class="tabs-content">
          <baseInfo />
        </div>
      </el-tab-pane>
      <el-tab-pane label="家庭成员" name="second">
        <div class="tabs-content">
          <memberOfFamily />
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的订单" name="third">
        <div class="tabs-content">
          <discharge-record />
        </div>
      </el-tab-pane>
      <el-tab-pane label="关于我们" name="fourth">
        <div class="tabs-content">
          <briefIntroduction />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import baseInfo from '@/views/personalCenter/components/baseInfo'
import memberOfFamily from '@/views/personalCenter/components/memberOfFamily'
import dischargeRecord from '@/views/personalCenter/components/dischargeRecord'
import briefIntroduction from '@/views/personalCenter/components/briefIntroduction'

export default {
  name: 'RightContent',
  components: {
    baseInfo, // 检验报告
    memberOfFamily, // 检查报告
    dischargeRecord, // 出院记录,
    briefIntroduction // 简介
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
    }
  }
}
</script>

<style lang="scss">
.right-content{
  flex-grow: 1;
  background: #fff;
  .el-tabs{
    height: 100%;
  }
  .el-tabs__header{
    height: 40px;
    margin-bottom:0;
    padding-left:20px;
    background: linear-gradient(90deg, #008CE7 0%, #05C3D1 100%);
  }
  .el-tabs__content{
    height: calc(100% - 40px);
  }
  .el-tab-pane{
    height: 100%;
  }
  .el-tabs__nav-wrap::after,
  .el-tabs__active-bar{
    display: none;
  }
  .el-tabs__item{
    height:38px;
    line-height: 38px;
    margin-top:2px;
    font-size: 16px;
    color:#fff;
  }
  .el-tabs__item.is-active{
    border-top-left-radius: 4px ;
    border-top-right-radius: 4px;
    color: #05C1D3;
    background: #fff;
  }
  .el-tabs__item:hover{
    color: #05C1D3;
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--top .el-tabs__item.is-top:last-child{
    padding-right: 20px;
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }
}
</style>

<style lang="scss" scoped>
.tabs-content{
  overflow: hidden;
  height: 100%;
  .item-menu{
    float:left;
    height: 100%;
  }
  .item-menu-main{
    float:left;
    height: 100%;
    width: 100%;
    padding: 15px;
    background: #fff;
  }
}
</style>
